<template>
  <div class="cycleSettings">
    <div class="title">运维周期设置</div>
    <div class="cycleItem">
      水站：
      <el-select v-model="station" size="mini" multiple style="width: 240px" placeholder="请选择水站名称">
        <p v-for="(item, index) of stationList" :key="index">
          <el-option :label="item" :value="item" se></el-option>
        </p>
      </el-select>
      <span class="allCheckBtn" @click="selectAll(stationList)">全选</span>
    </div>
    <div class="cycleItem">
      废液更换：
      <el-input-number v-model="wasteFluid" size="mini"></el-input-number>&nbsp; 天
    </div>
    <div class="cycleItem">
      试剂更换：
      <el-input-number v-model="reagent" size="mini"></el-input-number>&nbsp; 天
    </div>
    <div class="cycleItem">
      纯水添加：
      <el-input-number v-model="pureWater" size="mini"></el-input-number>&nbsp; 天
    </div>

    <el-button size="small" type="primary" @click="save">保 存</el-button>
  </div>
</template>



<script>
import { mapGetters } from 'vuex'
import posts from "@/plugins/request"
export default {
  data() {
    return {
      station: [],
      wasteFluid: null,
      reagent: null,
      pureWater: null,
    }
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList', //获取账号默认查看的站点
    })
  },
  methods: {
    async save() {
      const payload = {
        station: this.station.join(),
        wasteFluid: this.wasteFluid,
        reagent: this.reagent,
        pureWater: this.pureWater,

      }
      const result = await posts.setOperationCycle(payload)
      if(result.message === "success") {
        this.$notify({
          type: 'success',
          title: '成功',
          message: "运维周期设置成功",
        })
      }else {
        this.$notify({
          type: 'error',
          title: '成功',
          message: "运维周期设置失败，请稍后重试",
        })
      }
    },
    selectAll(selects) {
      this.station = selects
    }
  },
}
</script>

<style scoped>
.cycleSettings {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.cycleSettings .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.cycleSettings .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.cycleItem {
  margin-bottom: 12px;
}
.allCheckBtn {
  padding-left: 10px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
</style>